<template>
  <div class="classification">
    <div class="left">
      <van-sidebar v-model="activeKey">
        <van-sidebar-item
          v-for="(item, index) in list.categoryList"
          :key="index"
          :title="item.name"
          @click="clickIndex(index)"
        />
      </van-sidebar>
    </div>
    <div class="grid">
      <div class="banner">
        <img :src="currentCategory.picUrl" alt />
      </div>
      <van-grid :border="false">
        <van-grid-item
          v-for="(item, index) in Category"
          :icon="item.picUrl"
          :key="index"
          :text="item.name"
          :to="{ path: '/goodslist', query: { id: item.id } }"
        />
      </van-grid>
    </div>
  </div>
</template>

<script>
import { Sidebar, SidebarItem, Grid, GridItem,Toast } from "vant";
import API from "@/utils/api.js"; 
export default {
  name: "Classification",
  data() {
    return {
      //当前选中项的索引
      activeKey: 0,
      //分类目录
      list: [],
      //分类id
      id: [],
      //点击侧边栏的索引
      indexId: 0,
      //对应的分类内容
      Category: [],
      //banner
      currentCategory: "",
    };
  },
  components: {
    [Sidebar.name]: Sidebar,
    [SidebarItem.name]: SidebarItem,
    [Grid.name]: Grid,
    [GridItem.name]: GridItem,
    [Toast.name]:Toast
  },
  created() {
    //加载进入默认id
    this.getInfo(1005000);
  },
  methods: {
    //点击侧边栏请求分类数据
    clickIndex(index) {
      const that = this;
      that.indexId = index;
      //点击时触发当前导航项的索
      let id = that.id[that.indexId];
      console.log("id", id);
      that.getInfo(id);
    },
    getInfo(id) {
      // 创建promise，在promise中调用axios then里使用resolve回调，catch里使用reject回调
      const getCategory = new Promise((resolve, reject) => {
        this.$get(API.GET_CATALOG_CURRENT + "?id=" + id)
          .then((res) => {
            resolve(res);
            this.Category = res.data.currentSubCategory;
            this.currentCategory = res.data.currentCategory;
          })
          .catch((err) => {
            reject(err);
          });
      });
      const getGatalog = new Promise((resolve, reject) => {
        this.$get(API.GET_CATALOG_INFO)
          .then((res) => {
            resolve(res);
            this.list = res.data;
            let arr = res.data.categoryList;
            let arrIndex = [];
            //遍历分类获取ID 添加arrIndex
            arr.forEach((item) => {
              arrIndex.push(item.id);
            });
            this.id = arrIndex;
          })
          .catch((err) => {
            reject(err);
          });
      });
      // 调用Promise.all().then(res=>{})
      Promise.all([getCategory, getGatalog])
        .then((res) => {
          console.log(res);
        })
        .catch((err) => {
          Toast.fail('加载失败');
        });
    },
  },
};
</script>

<style lang="less" scoped>
.classification {
  margin-top: 46px;
  display: flex;
  van-sidebar {
    height: 100%;
  }
  .banner img {
    width: 90%;
    height: 120px;
    margin-top: 20px;
    margin-left: 20px;
    border-radius: 6px;
  }
}
</style>